/**
* @author  sparkHou
* @date 2020-10-26 11:12
* @Description:
*/
<template>
  <div class="cmsSearchTree">
    <el-popover
      :disabled="disabled"
      placement="top"
      width="400"
      @show="showHandle"
      trigger="click">
      <div class="popover WholeScroll">
        <el-input size="small"
                  placeholder="请搜索"
                  v-model="filterVal"
                  class="treeInput"/>
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          ref="tree"
          @check="nodeClick"
          :filter-node-method="filterNode"
          :props="defaultProps">
        </el-tree>
      </div>
      <el-button slot="reference" class="treeButton" :disabled="disabled">
        <div class="showTree">
          <el-tag size="mini"
                  closable
                  :key="index"
                  v-for="(item,index) in val"
                  @close="handleClose(index)">
            {{item.name}}
          </el-tag>
        </div>
      </el-button>
    </el-popover>
  </div>
</template>

<script>
  export default {
    name: "cmsSearchTree",
    props: {
      disabled: {
        type: Boolean,
        default: false
      },
      data: {
        type: Array,
        default: []
      },
      selectVal: {
        type: Array,
        default: []
      },
      defaultProps: {
        type: Object,
        default: {
          children: 'children',
          label: 'name'
        }
      },
      type: {
        type: String,
        default: 'third'
      }
      //切换选择模式：second:双层多选，数据里面有treeLevel:2
      // third:三层多选，根据children判断
      // one:只能选一个,双层树结构
    },
    watch: {
      'filterVal': {
        handler(val) {
          this.$refs.tree.filter(val);
        }
      },
      'selectVal': {
        handler(val) {
          this.val = val
        },
        deep: true,
        immediate: true
      }
    },
    data() {
      return {
        filterVal: '',
        val: []
      }
    },
    methods: {
      /**
       * 删除tag
       * @param i
       */
      handleClose(index) {
        if (this.disabled) {
          return
        }
        this.val.splice(index, 1)
        this.$emit('change', this.val)
      },
      /**
       * 节点点击
       * @param checkedNodes
       * @param tree
       */
      nodeClick(checkedNodes, tree) {
        console.log(checkedNodes, tree)
        let arr = []
        if (this.type === 'second') {
          tree.checkedNodes.forEach(item => {
            if (item.treeLevel === 2) {
              arr.push(item)
            }
          })
        }
        if (this.type === 'third') {
          tree.checkedNodes.forEach(item => {
            if (!item.children) {
              arr.push(item)
            }
          })
        }
        if (this.type === 'one') {
          //如果点了请全选按钮，默认取第一个子元素
          if (tree.checkedNodes[0] && tree.checkedNodes[0].treeLevel !== 2 && tree.checkedNodes.length !== 0) {
            arr.push(tree.checkedNodes[1])
          } else if (this.val.length === 0) {
            let data = tree.checkedNodes.filter(item => item.treeLevel === 2)
            if (data[0]) {
              arr.push(data[0])
            }
          } else {
            let data = tree.checkedNodes.filter(item => item.treeLevel === 2 && item.id !== this.val[0].id)
            if (data[0]) {
              arr.push(data[0])
            }
          }
        }
        this.$set(this, 'val', arr)
        this.$emit('change', this.val)
        this.updateTree()
      },
      /**
       * 筛选
       * @param value
       * @param data
       * @returns {boolean}
       */
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      /**
       * 更新树
       */
      updateTree() {
        let idArr = []
        this.val.forEach(item => {
          idArr.push(item.id)
        })
        this.$refs.tree.setCheckedKeys(idArr)
      },
      /**
       * 重置树
       */
      reset() {
        this.$refs.tree.setCheckedKeys([]);
      },
      /**
       * 显示前更新组件
       */
      showHandle() {
        this.updateTree()
      },
    }
  }
</script>

<style scoped lang="scss">
  .cmsSearchTree {
    .treeButton {
      width: 100%;
      min-height: 32px;

      .showTree {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .el-tag {
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }
    }
  }
</style>
